import { View, Text, Image } from '@tarojs/components';
import { AtButton, AtTag } from 'taro-ui';
import Price from '../Price';
import './index.scss';

interface IProps {
  serviceInfo: any;
  onHandle: (id: number) => void;
  onSelectSku: (service: any) => void;
}

export default function ({ serviceInfo, onHandle = () => {}, onSelectSku = () => {} }: IProps) {
  return (
    <View className="service-content">
      <Image
        mode="aspectFill"
        onClick={() => onHandle(serviceInfo.id)}
        className="service-image"
        src={serviceInfo.pic_url}
      />
      <View className="service-title" onClick={() => onHandle(serviceInfo.id)}>
        <AtTag size="small">到店付</AtTag>
        <Text>{serviceInfo.goods_name}</Text>
      </View>
      <View className="service-bottom">
        <View className="price-content">
          <Price price={serviceInfo.min_price} />
          {/* <Text className="market-price">￥{serviceInfo.min_price}</Text> */}
        </View>
        <View className="appointment-btn">
          <AtButton type="primary" onClick={() => onSelectSku(serviceInfo)}>
            预约
          </AtButton>
        </View>
      </View>
    </View>
  );
}
